<template>
    <!-- 单个商品卡片 -->
    <li class="cart">
        <img :src="good.s_goods_photos[0].path" alt="" @click="goDetail(good.id)">
        <h3>{{good.name}}</h3>
        <p>{{good.desc}}</p>
        <p>￥{{good.price.toFixed(2)}}</p>
        <div class="bnts">
            <button  @click="goDetail(good.id)">查看详情</button>
            <button @click="addShop(good.id)">加入购物车</button>
        </div>
    </li>
</template>

<script>
import { addCart } from "@/assets/request.js"
export default {
    name: "GoodCart",
    props: ["good"],
    methods: {
        // 跳转到详情页
        goDetail(id) {
            localStorage.removeItem("goodId")
            this.$router.push({
                name: "detail",
                params: {
                    id,
                }
            })
         },
        // 添加购物车
        async addShop(id) {
            // 发请求
            let goodRes = await addCart({
                goods_id: id,
                num: 1,
                project_id: 255
            })
            if(goodRes.status==200){
                this.$message({
                    message:'已加入购物车',
                    type:'success',
                    duration:800,
                })
            }else{
                this.$message({
                    message:'加入购物车失败',
                    duration:1000
                })
            }
        },
    }
}

</script>

<style lang='scss' scoped>
@function vw($w) {
    @return ($w/1349) * 100+vw;
}
.cart {
    width: vw(291);
    height: vw(420);
    background-color: #fff;
    text-align: center;
    margin-bottom: vw(16);

    &:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
    }
    img {
        width: vw(291);
        height: vw(254);
        cursor:pointer;
    }

    h3 {
        height: vw(26);
        font-weight: 400;
        font-size: vw(15);
        line-height: vw(26);
        margin: vw(10) vw(20) 0 vw(20);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    p:nth-of-type(1){
        color:rgb(173, 172, 172);
        height: vw(25);
        font-size: vw(12);
        line-height: vw(25);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    p:nth-of-type(2) {
        color: red;
        font-size: vw(18);
        margin: 0 0 vw(15) 0;
    }
    .bnts {
                    margin: 0 vw(50);
                    display: flex;
                    justify-content: space-between;

                    button:nth-of-type(1) {
                        padding: vw(5) vw(8);
                        cursor:pointer;
                    }

                    button:nth-of-type(2) {
                        padding: vw(5) vw(8);
                        color: red;
                        cursor:pointer;
                    }
                }
}
</style>
